<template>
	<view class="detail-container">
		<view class="top">
			<view class="top-left">
				<image :src="movieDetail.movies.cover"></image>
			</view>
			<view class="top-right">
				<view>
					<text  class="title">{{title}}</text>
				</view>
				<view class=""><text class="enTitle">{{enTitle}}</text></view>
				<view class=""><text class="typeInfo">{{typeInfo}}</text></view>
				
				<view class="button-box">
					<button type="default">想看</button>
					<button type="default">看过</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				movieDetail: {
					title:''
				}
			}
		},
		computed:{
			title(){
				return this.movieDetail.title.split(' ')[0]
			},
			enTitle(){
				return this.movieDetail.title.replace(this.title,'')
			},
			typeInfo(){
				return this.movieDetail.region+' / '+'影片时长'+this.movieDetail.duration
			}
		},
		methods: {
			getMovieById(_id = "6135a1c04f97b1ae121c4314") {
				this.$api.movies.getDetailsByMovieId(_id)
					.then(({
						result
					}) => {
						this.movieDetail = result
						console.log(result);
					})
			}
		},
		onLoad(options) {
			this.getMovieById(options._id)
			// console.log(options);
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		padding: 45rpx 30rpx;

		.top {
			display: flex;

			.top-left {
				margin-right: 30rpx;
				image {
					width: 200rpx;
					height: 280rpx;
					border-radius: 10rpx;
				}
				
			}
			.top-right{
				.title{
					font-size: 43rpx;
					font-weight: bold;
					// display: -webkit-box;
					// -webkit-line-clamp: 1;
					// -webkit-box-orient: vertical;
					// text-overflow: ellipsis;
					// overflow: hidden;
				}
				.enTitle{
					font-size: 30rpx;
					color: #818181;
				}
				.typeInfo{
					font-size: 20rpx;
					color: #818181;
				}
				.button-box{
					display: flex;
					margin-top: 45rpx;
					button{
						width: 210rpx;
					}
				}
			}
		}
	}
</style>
